<template>
    <div class="pay_container">
        <HeaderTop :goBack="true" :headTitle="'订单支付'"></HeaderTop>
        <section class="show_time_amount">
            <span>剩余支付时间</span>
            <p class="time">{{remaining}}</p>
        </section>
        <section class="pay_way_list">
            <header>选择支付方式</header>
            <section class="pay_item">
                <div class="icon">
                    <div class="zhifubao"></div>
                    <span>支付宝</span>
                </div>
                <svg class="choose_icon" @click="payWay = 1" :class="{choosed_way: payWay == 1}">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#select"></use>
                </svg>
            </section>
            <section class="pay_item">
                <div class="icon">
                    <svg>
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#weixin"></use>
                    </svg>
                    <span>微信</span>
                </div>
                <svg class="choose_icon" @click="payWay = 2" :class="{choosed_way: payWay == 2}">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#select"></use>
                </svg>
            </section>

        </section>
        <p class="determine">支付</p>
    </div>
</template>

<script>
import { mapState ,mapActions} from 'vuex';
export default {
    data(){
        return {
            payDetail:{
                cartPrice:99.919999,

            },
            timer:null,
            countNum: 900, //倒计时15分钟
            showAlert:false,
            alertText:'',
            payWay:0,
        }
    },
    computed:{
        ...mapState(['']),
        remaining(){
            let minute = parseInt(this.countNum/60);
                if (minute < 10) {
                    minute = '0' + minute;
                }
                let second = parseInt(this.countNum%60);
                if (second < 10) {
                    second = '0' + second;
                }
                return '00 : ' + minute + ' : ' + second;
        }
    },
    mounted(){
        this.remainingTime();
    },
    methods:{
        async initData(){
            // this.payDetail = await payRequest(this.orderMessage.order_id, this.userInfo.user_id);
            // if (this.payDetail.message) {
            //     this.showAlert = true;
            //     this.alertText = this.payDetail.message;
            //     return
            // }
        },
        remainingTime(){
            this.timer = setInterval(()=>{
                this.countNum--;
                if(this.countNum === 0){
                    clearTimeout(this.timer);
                    this.showAlert = true;
                    this.alertText = '支付超时';
                }
            },1000)
        }
    },
    beforeDestroy(){
        if(this.timer){
            clearTimeout(this.timer);
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~@styl/mixin.scss';
.pay_container{
    p, span{
        font-family: Helvetica Neue,Tahoma,Arial;
    }
    position: fixed;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 1.95rem;
    z-index: 30;
    background-color: #f2f2f2;
    .show_time_amount{
        height: 6rem;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        span{
            @include sc(0.6rem,#999);
        }
        p{
            @include sc(1.5rem,#333);
        }
    }
    .pay_way_list{
        margin-top: 0.5rem;
        padding: 0 0.5rem;
        background-color: #fff;
        header{
            @include sc(0.7rem,#666);
            line-height: 1.5rem;
        }
        .pay_item{
            @include fj;
            align-items: center;
            padding: 0.5rem 0;
            border-bottom: 0.012rem solid #f2f2f2;
            .icon{
                display: flex;
                align-items: center;
                .zhifubao{
                    @include wh(2rem,2rem);
                    background: url('../../../assets/imgs/zhifubao.png') no-repeat;
                    background-size: 100% 100%;
                }
                span{
                    margin-left: 0.5rem;
                    @include sc(0.8rem,#666);
                }
                svg{
                    @include wh(2rem,2rem);
                }
            }
            .choose_icon{
                @include wh(1.2rem,1.2rem);
                fill: #ccc;
                &.choosed_way{
                    fill: $blue;
                }
            }
        }
    }
    .determine{
        margin: 0.5rem 0.5rem 0;
        background-color: $green;
        @include sc(0.7rem,#fff);
        padding: 0.5rem 0;
        text-align: center;
        border-radius: 0.2rem;
    }
}
</style>